<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-is-post-event">
      <dropdown-normal label="全局接口类型" :valLists="GLOBAL_POST_TYPES" v-model="commonAttr.interfaceType" @change="onChangeAttr"></dropdown-normal>
      <input-normal label="关联组件id" v-model="commonAttr.relateCompId" @change="onChangeAttr"></input-normal>
      <input-normal label="描述" v-model="commonAttr.text" @change="onChangeAttr"></input-normal>
      <slider-normal v-model="commonAttr.fontSize" label="字号" :max="100" :step="1" @change="onChangeAttr"></slider-normal>
      <color-normal v-model="commonAttr.color" label="字体颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.borderColor" label="边框颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.backgroundColor" label="背景色" format="rgb" @change="onChangeAttr"></color-normal>
      <p class="margin-left-right-16">取消选中图片</p>
      <add-img-con :url="commonAttr.checkboxUrl" comAttr="commonAttr" picAttr="checkboxUrl" :height="100" :isCrop="true" :isDelete="true" class="margin-left-right-16"></add-img-con>
      <p class="margin-left-right-16">选中图片</p>
      <add-img-con :url="commonAttr.selectedCheckboxUrl" comAttr="commonAttr" picAttr="selectedCheckboxUrl" :height="100" :isCrop="true" :isDelete="true" class="margin-left-right-16"></add-img-con>
    </el-form>
  </right-template>
</template>
<script>
  import RightTemplate from '@/views/child/right/right-template.vue'
  import ColorNormal from '@/views/components/edit/ColorNormal.vue'
  import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import SliderNormal from '@/views/components/edit/SliderNormal.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
  import AddImgCon from '@/views/components/add-img-con.vue'

  import { mapState } from 'vuex'
  import { editUtils } from '@/views/js/edit-utils'

  export default {
    mixins: [editUtils],
    created() {},
    components: {
      RightTemplate,
      ColorNormal,
      DropdownNormal,
      InputNormal,
      SliderNormal,
      SwitchNormal,
      AddImgCon,
    },
    computed: {
      ...mapState({
        globalIsPost: state => _.cloneDeep(state.globalIsPost)
      }),
    },
  };
</script>
<style lang="scss">
</style>
